<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main">
      <p class="content">
        <span>001.</span>在下列哪个选项中，typeof 返回的值为 "object"?
      </p>
      <form>
        <!-- <input type="radio" name="A" id="A" value="A" /><span class="sel"
          >A.</span
        ><span class="sel">null</span>
        <input type="radio" name="A" class="value" /><span class="sel">B.</span
        ><span class="sel">null</span> <input type="radio" name="A" /><span
          class="sel"
          >C.</span
        ><span class="sel">null</span> <input type="radio" name="A" /><span
          class="sel"
          >D.</span
        ><span class="sel">null</span> -->
      </form>
    </main>

    <button onclick="submitAnswers()">提交答案</button>

    <p id="score"></p>
    <script src="./lib/form-serialize.js"></script>
    <script>
      const list = [
        {
          id: '001',
          titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          titile: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }
      const main = document.querySelector('#main')
      const btn = document.querySelector('button')

      //console.log(form);
      let arr = list.map((item1) => {
        //console.log(item1);
        // console.log(item.options);
        //表单元素的name要匹配唯一的 一组四个选项一样的name才可以只能选中一个
        //value 是获取具体的选项
        return ` <p class="content">${item1.titile}</p>
              <form><div class="select">${item1.options.map((item2) => {
             return `<input type="radio" name="${item1.id}" value="${item2.op}" > 
             <span class="sel" >${item2.op}、</span><span class="sel">${item2.value} </span>
           `}).join('')
          }
       </div>
       <form>`
      })
      main.innerHTML = arr.join('')
      function submitAnswers() {
        //利用插件获取表单的值
        const obj = serialize(document.querySelector('form'), { hash: true })
        let score = 0
        /*alert(`您的得分为${score}分,共30分`) */
        for (let k in obj) {
          if (obj[k] === answer[k]) {
            score += 10
          }
        }
       // console.log(score)
        return (document.querySelector('#score' ).innerHTML = `您的得分是${score},总分是30分`)
      }
    </script>
  </body>
</html>
